<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/overStyle.css">
    <link rel="stylesheet" href="css/bought.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="top">
        商家信息
    </div>
    <div id="app"  class="container">
        <div class="sellerMessage">
            <img src="img/sj01.png" alt="">
            <p><b>万家饺子(软件园E18店)</b></p>
            <div>&yen;15起送 &yen;3配送</div>
            <div>各种饺子炒菜</div>
        </div>
        <div>
            <div v-for="food in foodList" class="foods">
                <img :src="food.icon" alt="">
                <div class="text">
                    <div class="foodName"><b>{{food.foodName}}</b></div>
                    <div class="material">{{food.material}}</div>
                    <div class="price">&yen;{{food.price}}</div>
                </div>
                <div class="adjust">
                    <span v-show="food.num > 0">
                        <button class="reduce" @click="reduce(food.id,food.price)">-</button>
                        <span>{{food.num}}</span>
                    </span>
                    <button class="add" @click="add(food.id,food.price)">+</button>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="blackCircle">
                <div class="blueCircle">
                    <i class="fa fa-shopping-cart"></i>
                    <div class="num" v-show="number > 0">{{number}}</div>
                </div>
            </div>
            <div class="sum">
                <div>&yen;{{money}}</div>
                <div class="sendFee">另需配送费3元</div>
            </div>
            <a href="#">
                <div class="count">去结算</div>
            </a>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/bought.js"></script>
</body>
</html>